<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>订单信息</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!--favicon-->
    <link rel="stylesheet" th:href="@{/plugins/datatable/css/dataTables.bootstrap5.min.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link th:include="admin/adminGoodsUtils-common::commonheader">
    <title>Rocker - Bootstrap 5 Admin Dashboard Template</title>
</head>

<body>
<!--wrapper-->
<div class="wrapper">
    <div th:replace="admin/adminGoodsUtils-common::#commonbody1"></div>
    <div th:replace="admin/adminGoodsUtils-common::#commonbody2"></div>
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">订单信息表</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                            </li>
                            <li aria-current="page" class="breadcrumb-item active">Data Table</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <h3 class="mb-0 text-uppercase">订单信息表</h3>
            <hr/>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="example1">
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>订单创建时间</th>
                                <th>订单用户名</th>
                                <th>用户手机号</th>
                                <th>派送员姓名</th>
                                <th>派送员编号</th>
                                <th>取货地址</th>
                                <th>收货地址</th>
                                <th>配送物品</th>
                                <th>配送物品数量</th>
                                <th>配送奖励值</th>
                                <th>订单状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="form,statar:${list}">
                                <td th:text="${form.getId()}"></td>
                                <td th:text="${form.getTimeString()}"></td>
                                <td th:text="${form.getName()}"></td>
                                <td th:text="${form.getPhone()}"></td>
                                <td th:text="${form.getUsername()}"></td>
                                <td th:text="${form.getGetherId()}==0?'':${form.getGetherId()}"></td>
                                <td th:text="${form.getAddress()}"></td>
                                <td th:text="${form.getDefaultaddress()}"></td>
                                <td th:text="${form.getGovernmentsupplyid()}"></td>
                                <td th:text="${form.getQuantity()}"></td>
                                <td th:text="${form.getIndentReward()}"></td>
                                <td th:if="${form.getPastdue()==0&&form.getGetherId()=='0'}">未发货</td>
                                <td th:if="${form.getPastdue()==1}">已完成</td>
                                <td th:if="${(form.getPastdue()==0&&form.getGetherId()!='0')}">配送中</td>
                                <td th:if="${form.getPastdue()==2}">待收取</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <h3 class="mb-0 text-uppercase">派送员接单柱状图</h3>
            <hr/>
            <div class="card">
                <div class="card-body">
                    <div class="chart-container1 ">
                        <div class="col-12" id="main" style="height: 400px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--end page wrapper -->
    <!--start overlay-->
    <div class="overlay toggle-icon"></div>
    <!--end overlay-->
    <!--Start Back To Top Button--> <a class="back-to-top" href="javaScript:;"><i class='bx bxs-up-arrow-alt'></i></a>
</div>
<!--end wrapper-->
<!-- Bootstrap JS -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--plugins-->
<script th:src="@{/plugins/jquery.min.js}"></script>
<script th:src="@{/plugins/simplebar/js/simplebar.min.js}"></script>
<script th:src="@{/plugins/metismenu/js/metisMenu.min.js}"></script>
<script th:src="@{/plugins/perfect-scrollbar/js/perfect-scrollbar.js}"></script>
<script th:src="@{/plugins/datatable/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatable/js/dataTables.bootstrap5.min.js}"></script>

<script>
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>
<script>
    $(document).ready(function () {
        var table = $('#example1').DataTable({
            lengthChange: false,
            buttons: ['copy', 'excel', 'pdf', 'print']
        });
        table.buttons().container()
            .appendTo('#example1_wrapper .col-md-6:eq(0)');
    });
</script>
<script th:src="@{/plugins/rewardsChartsConstant.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $(function () {
        $.ajax({
            "url": "/charts",
            "type": "POST",
            "success": function (data) {
                const myChart = rewardsChartsConstant.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                const option = {
                    //图的标题
                    title: {
                        //大标题
                        text: '派送员目前拥有奖励数量统计图',
                        //小标题
                        subtext: '派送员端',
                    },
                    //鼠标经过图时有提示
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: data.username
                    },
                    yAxis: {
                        type: 'value',
                        name: '糖果数量',
                        min: 0,
                        max: 20,
                        position: 'right',
                    },
                    series: [{
                        data: data.count,
                        yAxisIndex: 0,
                        type: 'bar',
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    })
</script>
<script th:src="@{/js/app.js}"></script>
</body>

</html>
